<template>
  <!-- 协力公司新闻 -->
  <div class="professional_news_list">
    <router-link
      v-for="(item,index) in list"
      :key="index"
      :to="{name:'jap_professional_details',query:{id:item.id}}"
      class="professional_news_item clearfloat"
    >
      <div class="img">
        <div class="imgBox"  :style="{backgroundImage:'url('+ item.image_input + ')'}"></div>
        <!-- <img class="imgX" :src="item.image_input" alt /> -->
      </div>
      <div class="news_abstract">
        <h3>{{item.title}}</h3>
        <p>{{item.synopsis}}</p>
        <div class="news_time">
          <img src="@/assets/images/news_time.png" alt />
          <span>{{item.date_time}}</span>
        </div>
        <div  class="details_botton">詳しい</div>
      </div>
    </router-link>
    <el-pagination
      :page-size="10"
      :total="count"
      background
      layout="prev, pager, next"
      @current-change="pageSize"
    ></el-pagination>
  </div>
</template>
<script>
import { news_article_cate, news_list } from "@/api/news.js";
export default {
  data() {
    return {
      ifHidePage: true,
      list: [],
      count: 1
    };
  },
  // props: {
  //   news_cate: {
  //     type: Array,
  //     default: null
  //   }
  // },
  mounted() {
    news_article_cate().then(res => {
      this.news_cate = res.data.data.JAP;
      // news_list(1：分页页数 ,4：限制个数 ， id :分类id)
      return this.getNews_list_(1, 10, this.news_cate[1].id);
    });
  },
  methods: {
    pageSize(page) {
      this.getNews_list_(page, 10, this.news_cate[1].id);
    },
    getNews_list_(page, limit, cid) {
      news_list({ page, limit, cid }).then(res => {
        res.data.data.map(item => {
          item.time = item.date_time.split("-");
        });
        this.count = res.data.count;
        this.list = res.data.data;
      });
    }
  }
};
</script>
<style scoped src="./sass/news.css"></style>